<template>
	<view class="content">

		<view class="title fs18 C333">交易投诉详情</view>
		<view class="process">
			<view class="flexsb processTitle">
				<view :class="[(lis.complain_state >=10) ? 'processActive' : '']" class="processActive">新投诉</view>
				<view :class="[(lis.complain_state >=20) ? 'processActive' : '']" class="">待申诉</view>
				<view :class="[(lis.complain_state >=30) ? 'processActive' : '']" class="">对话中</view>
				<view :class="[(lis.complain_state >=40) ? 'processActive' : '']" class="">待仲裁</view>
				<view :class="[(lis.complain_state >=99) ? 'processActive' : '']" class="">已完成</view>
			</view>

			<view v-if="lis.complain_state == 10"
				style=" position: relative;z-index: 0;top: 40upx;width: 650upx;height: 2upx;margin: 0 auto;"
				class="progress-box">
				<progress activeColor="#ff4300" percent="0" stroke-width="2" />
			</view>
			<view v-if="lis.complain_state == 20"
				style=" position: relative;z-index: 0;top: 40upx;width: 650upx;height: 2upx;margin: 0 auto;"
				class="progress-box">
				<progress activeColor="#ff4300" percent="25" stroke-width="2" />
			</view>
			<view v-if="lis.complain_state == 30"
				style=" position: relative;z-index: 0;top: 40upx;width: 650upx;height: 2upx;margin: 0 auto;"
				class="progress-box">
				<progress activeColor="#ff4300" percent="50" stroke-width="2" />
			</view>
			<view v-if="lis.complain_state == 40"
				style=" position: relative;z-index: 0;top: 40upx;width: 650upx;height: 2upx;margin: 0 auto;"
				class="progress-box">
				<progress activeColor="#ff4300" percent="75" stroke-width="2" />
			</view>
			<view v-if="lis.complain_state == 99"
				style=" position: relative;z-index: 0;top: 40upx;width: 650upx;height: 2upx;margin: 0 auto;"
				class="progress-box">
				<progress activeColor="#ff4300" percent="100" stroke-width="2" />
			</view>
			<!-- <view class="line"></view> -->
			<view v-if="lis.complain_state == 10" class="flexsb circles">
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
			</view>
			<view v-if="lis.complain_state == 20" class="flexsb circles">
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="../../static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
			</view>

			<view v-if="lis.complain_state == 30" class="flexsb circles">
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
			</view>

			<view v-if="lis.complain_state == 40" class="flexsb circles">
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;" src="/static/images/login/xuanzhong-icon.png"
						mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="false" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="true" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
			</view>

			<view v-if="lis.complain_state == 99" class="flexsb circles">
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
				<view class="">
					<image v-if="true" style="width: 40upx;height: 40upx;"
						src="/static/images/login/xuanzhong-icon.png" mode=""></image>
					<image v-if="false" style="width: 40upx;height: 40upx;" src="@/static/images/new_tousugg2.jpg"
						mode=""></image>
				</view>
			</view>
		</view>

		<view class="tousuContent">
			<view class="title2 fs18 C333">投诉信息</view>

			<view class="commonLi fs18 C666 lh50">被投诉供应商：{{lis.accused_name}}</view>
			<view class="commonLi fs18 C666 lh50">投诉主题：{{lis.complain_subject_content}}</view>
			<view class="commonLi fs18 C666 lh50">投诉时间：{{lis.complain_datetime | formaDate('yyyy-mm-dd')}}</view>
			<view class="commonLi fs18 C666 lh50">投诉内容：{{lis.complain_content}}</view>
			<view class="commonLi fs18 C666 lh50">投诉证据：
				<div class="replenish" v-if="(lis.complain_pic1.length==0&&lis.complain_pic2.length==0&&lis.complain_pic3.length==0)&&lis.complain_state<99" @click="addshow">补充证据
				</div>
			</view>
			<view class="commonLi">
				<image style="width: 177upx;height: 174upx;" v-if="lis.complain_pic1.length > 0"
					:src="lis.complain_pic1" mode=""></image>
				<image style="width: 177upx;height: 174upx;" v-if="lis.complain_pic2.length > 0"
					:src="lis.complain_pic2" mode=""></image>
				<image style="width: 177upx;height: 174upx;" v-if="lis.complain_pic3.length > 0"
					:src="lis.complain_pic3" mode=""></image>
			</view>
		</view>
		<view class="tousuContent" v-if="lis.complain_state>=30">
			<view class="title2 fs18 C333">申诉信息</view>

			<view class="commonLi fs18 C666 lh50">申诉时间：{{lis.appeal_datetime | formaDate('yyyy-mm-dd')}}</view>
			<view class="commonLi fs18 C666 lh50">申诉内容：{{lis.appeal_message}}</view>
			<view class="commonLi fs18 C666 lh50">申诉证据：
			</view>
			<view class="commonLi">
				<image style="width: 177upx;height: 174upx;" v-if="lis.appeal_pic1.length > 0" :src="lis.appeal_pic1"
					mode=""></image>
				<image style="width: 177upx;height: 174upx;" v-if="lis.appeal_pic2.length > 0" :src="lis.appeal_pic2"
					mode=""></image>
				<image style="width: 177upx;height: 174upx;" v-if="lis.appeal_pic3.length > 0" :src="lis.appeal_pic3"
					mode=""></image>
			</view>
		</view>
		<view class="tousuContent">
			<view class="title2 fs18 C333">对话信息</view>
			<view class="commonLi fs18 C666 lh50">
				对话记录：
			</view>
			<scroll-view scroll-y="true"  class="commonLi scroll-view-box">
				<view  v-for="(item,index) in talkList" :key="index">
					{{item.talk}}
				</view>
			</scroll-view>
			<view class="commonLi fs18 C666 lh50" v-if="lis.complain_state==30">
				发送对话：
			</view>
			<view class="commonLi" v-if="lis.complain_state==30">
				<textarea v-model="complain_talk"
					style="width:720rpx;background: #F6F6F6;padding: 20upx;box-sizing: border-box;color: black;font-size: 30rpx;"
					value="" />
			</view>
			<view class="btn-box" v-if="lis.complain_state==30">
				<view class="submitBtn" @click="sendTalk">
					发送对话
				</view>
				<view class="submitBtn" @click="RefreshTalk" style="margin: 0 30rpx;">
					刷新对话
				</view>
				<view class="submitBtn confirmBtn" @click="confirmBtn">
					提交仲裁
				</view>
			</view>
		</view>
		<view class="tousuContent" v-if="lis.complain_state==99">
			<view class="title2 fs18 C333">处理信息</view>
		
			<view class="commonLi fs18 C666 lh50">处理时间：{{lis.final_handle_datetime | formaDate('yyyy-mm-dd')}}</view>
			<view class="commonLi fs18 C666 lh50">处理内容：{{lis.final_handle_message}}</view>
		</view>
		<view style="height: 40rpx;background-color: #FFFFFF;"></view>
		<!-- 补充证据弹窗 -->
		<uni-popup ref='replenish' type="center">
			<view class="pop-box">
				<view class="pop-title">
					补充证据
				</view>
				<view class="flex0 commonLi">
					<view class="fs18 C999">
						<view class="">
							<image style="width: 160upx;height: 160upx;" @click="upload(1)"
								:src="img1 ? img1 : `${picUrl}/w/pt.png`" mode=""></image>
							<image style="width: 160upx;height: 160upx;" @click="upload(2)"
								:src="img2 ? img2 : `${picUrl}/w/pt.png`" mode=""></image>
							<image style="width: 160upx;height: 160upx;" @click="upload(3)"
								:src="img3 ? img3 : `${picUrl}/w/pt.png`" mode=""></image>
						</view>
						<view class="fs18 C999">
							图片格式（jpg/jpeg/gif/png）
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="submitBtn cancelBtn" @click="close">
						取消
					</view>
					<view @click="submitBtn" class="submitBtn">提交</view>
				</view>
				<view style="height: 1rpx;"></view>
			</view>
		</uni-popup>
	</view>


</template>

<script>
	const requImg = require("@/common/api_sign/requImg.js")
	export default {
		data() {
			return {
				lis: [],
				id: '',
				active2flag: 0,
				img1: "",
				img2: "",
				img3: "",
				isData: true,
				Imgdata: {},
				ImgInfo1: "",
				ImgInfo2: "",
				ImgInfo3: "",
				complain_talk: "",
				talkList: []
				// bottomBtn:[
				// 	{"name":"首页","img1":"../../static/images/home_bottom11.png","img2":"../../static/images/home_bottom12.png","toUrl":"../home/home"},
				// 	{"name":"分类","img1":"../../static/images/home_bottom21.png","img2":"../../static/images/home_bottom22.png","toUrl":"../sort/sortPage"},
				// 	{"name":"分销","img1":"../../static/images/home_bottom31.png","img2":"../../static/images/home_bottom32.png","toUrl":"../distribution/list"},
				// 	{"name":"购物车","img1":"../../static/images/home_bottom41.png","img2":"../../static/images/home_bottom42.png","toUrl":"../car/shopCar"},
				// 	{"name":"会员中心","img1":"../../static/images/home_bottom51.png","img2":"../../static/images/home_bottom52.png","toUrl":"/pages/home/Personal_Center"}
				// ]
			}
		},
		onLoad(options) {
			console.log(options.id)
			this.id = options.id;
			this.getLis();
			this.getTalkList()
		},
		onShow() {

		},
		methods: {
			confirmBtn() {
				let that = this
				uni.showModal({
					content: '确认提交仲裁吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$util.request({
								url: "/mobile/index.php?act=member_complain&op=apply_handle",
								method: 'post',
								data: {
									input_complain_id: that.id
								}
							}).then(res => {
								if (res.error_code == 0) {
									uni.showToast({
										title: "提交成功",
										icon: "none",
										success() {
											setTimeout(() => {
												that.getLis();
												that.getTalkList()
											}, 1000)
										}
									})
									console.log('操作成功')
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			sendTalk() {
				let that = this;
				if (that.complain_talk == '') {
					uni.showToast({
						title: "请输入发送内容",
						icon: "none"
					})
					return
				}
				that.$util.request({
					url: '/mobile/index.php?act=member_complain&op=publish_complain_talk',
					method: 'post',
					data: {
						"complain_id": that.id,
						"complain_talk": that.complain_talk
					},
				}).then(function(res) {
					if (res.error_code == 0) {
						that.complain_talk=''
						uni.showToast({
							title: "发送成功",
							icon: "none",
							success() {
								setTimeout(() => {
									that.getTalkList()
								}, 1000)
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			RefreshTalk() {
				this.getTalkList()
				uni.showToast({
					title: '刷新成功',
					icon: "none"
				})
			},
			getTalkList() {
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_complain&op=get_complain_talk',
					method: 'post',
					data: {
						"complain_id": that.id
					},
				}).then(function(res) {
					that.talkList = res.datas
				})
			},
			submitBtn() {
				let that = this
				if (that.ImgInfo1 == '' && that.ImgInfo2 == '' && that.ImgInfo3 == '') {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				that.$util.request({
					url: '/mobile/index.php?act=member_complain&op=complain_add_pic',
					method: 'post',
					data: {
						"complain_id": that.id,
						"complain_pic1": that.ImgInfo1,
						"complain_pic2": that.ImgInfo2,
						"complain_pic3": that.ImgInfo3

					}
				}).then(res => {
					if (res.error_code == 0) {
						that.close()
						uni.showToast({
							title: "提交成功",
							icon: "none",
							success() {
								setTimeout(() => {
									that.getLis()
								}, 1000)
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			upload(i) {
				let that = this;
				if (that.isData) {
					uni.chooseImage({ //图片选择上传
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							// console.log('tempFilePaths',tempFilePaths)
							let data = requImg.request("index.php?act=upload&op=uploadFile&buss_type=" + that
								.$uploadType.uploadtype010);
							var uper = uni.uploadFile({
								url: that.$apiurl + "index.php?act=upload&op=uploadFile",
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									"key": data.key,
									buss_type: data.buss_type,
									"api_sign": data.api_sign,
									"comefrom": data.comefrom,
									"api_time": data.api_time,
								},
								success(res1) {
									let ImgInfo = JSON.parse(res1.data)
									// console.log('ImgInfo',ImgInfo)
									that.Imgdata = {
										"filePath": ImgInfo.datas.file_url,
										"path": ImgInfo.datas.file_name
									};
									if (i == 1) {
										// console.log('1',that.Imgdata.filePath)
										if (that.Imgdata.filePath) {
											that.img1 = that.Imgdata.filePath;
											that.ImgInfo1 = that.Imgdata.path;
										} else {
											uni.showToast({
												title: "图片上传超时",
												icon: "none"
											})
										}

									} else if (i == 2) {
										console.log('2', that.Imgdata.filePath)
										if (that.Imgdata.filePath) {
											that.img2 = that.Imgdata.filePath;
											that.ImgInfo2 = that.Imgdata.path;
										} else {
											uni.showToast({
												title: "图片上传超时",
												icon: "none"
											})
										}

									} else if (i == 3) {
										console.log('3', that.Imgdata.filePath)
										if (that.Imgdata.filePath) {
											that.img3 = that.Imgdata.filePath;
											that.ImgInfo3 = that.Imgdata.path;
										} else {
											uni.showToast({
												title: "图片上传超时",
												icon: "none"
											})
										}
									}
								},
							})
						}
					});
				} else {
					uni.showToast({
						title: "图片正在上传中",
						icon: "loading"
					})
				}

			},
			close() {
				this.ImgInfo1=""
				this.ImgInfo2=""
				this.ImgInfo3=""
				this.$refs.replenish.close()
			},
			addshow() {
				this.$refs.replenish.open()
			},
			getLis() {
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_complain&op=complain_show',
					method: 'post',
					data: {
						"complain_id": that.id
					},
				}).then(function(res) {
					console.log(res)
					that.lis = res.datas
				})
			},
			tab2(index, url) {
				this.active2flag = index
				console.log(this.active2flag);
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style>
	.scroll-view-box{
		height: 300rpx;
		width: auto;
	}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .scroll-view-box::-webkit-scrollbar{
    width: 10rpx;
    background-color: #F5F5F5;
  }
  
  /*定义滚动条轨道 内阴影+圆角*/
  .scroll-view-box::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6rpx rgba(0,0,0,0.3);
    border-radius: 10rpx;
    background-color: #F5F5F5;
  }
  
  /*定义滑块 内阴影+圆角*/
  .scroll-view-box::-webkit-scrollbar-thumb{
    border-radius: 10rpx;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #ff5500;
  }
	.replenish {
		display: inline-block;
		width: 150rpx;
		height: 50rpx;
		background-color: #FF5722;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.pop-box {
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.pop-title {
		font-size: 32rpx;
		color: #000000;
		padding: 20rpx;
	}

	.flex0 {
		display: flex;
	}

	.btn-box {
		display: flex;
		margin: 40rpx 20rpx;
		margin-bottom: 0rpx;
		justify-content: center;
	}

	.submitBtn {
		width: 200upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #fff;
		background-color: #ff4300;
		border-radius: 10rpx;
	}

	.cancelBtn {
		background-color: #F5F5F5;
		color: #666666;
		margin-right: 30rpx;
	}

	.confirmBtn {
		background-color: #ff0000;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
	}

	view {
		box-sizing: content-box;
	}

	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
	}

	.lh20 {
		line-height: 20upx;
		height: 20upx;
	}

	.lh25 {
		line-height: 25upx;
	}

	.lh30 {
		line-height: 30upx;
	}

	.lh35 {
		line-height: 35upx;
	}

	.lh40 {
		line-height: 40upx;
	}

	.lh45 {
		line-height: 45upx;
	}

	.lh50 {
		line-height: 50upx;
	}

	.lh80 {
		line-height: 80upx;
	}

	.C000 {
		color: #000000;
	}

	.Ce13d97 {
		color: #ff4300;
	}

	.Cfe0000 {
		color: #ff4300;
	}

	.Cc06 {
		color: #ff4300;
	}

	.mt55mb30 {
		margin-top: 55upx;
		margin-bottom: 30upx;
	}

	.Cfff {
		color: #FFFFFF;
	}

	.flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}

	.paddingL20 {
		padding-left: 20upx;
	}

	.C999 {
		color: #999;
	}

	.Cff0101 {
		color: #ff0101;
	}

	.Cc00251 {
		color: #c00251;
	}

	.strick {
		text-decoration: line-through;
	}

	.Cfe0000 {
		color: #ff4300;
	}

	.line1 {
		width: 430upx;
	}

	.hide {
		display: none;
	}

	.marginB20 {
		margin-bottom: 20upx;
	}

	.oneLine {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.twoline {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.pl20 {
		padding-left: 20upx;
	}

	.positionT {
		position: relative;
		top: 50upx;
	}

	.paddingB15 {
		padding-bottom: 15upx;
	}

	.borderB {
		border-bottom: 1px solid #f4f4f6;
	}

	.borderT {
		border-top: 1px solid #f4f4f6;
	}

	.gl {
		position: absolute;
		right: 30upx;
	}

	.pr30 {
		padding-right: 30upx;
	}

	.C333 {
		color: #333333;
	}

	.C666 {
		color: #666666;
	}

	.Cf00 {
		color: #ff0000;
	}

	.bold {
		font-weight: bold;
	}

	.C1d1d1d {
		color: #1d1d1d;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.tac {
		text-align: center;
	}

	.Ce5258e {
		color: #e5258e;
	}

	.Cccc {
		color: #CCCCCC;
	}

	.Cf7881c {
		color: #f7881c;
	}

	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}

	.fs30 {
		/* font-size: 30upx */
		font-size: 45upx
	}

	.fs26 {
		font-size: 39upx
			/* font-size: 26upx */
	}

	.fs12 {
		font-size: 18upx
			/* font-size: 12upx */
	}

	.fs16 {
		font-size: 24upx
			/* font-size: 16upx */
	}

	.fs14 {
		font-size: 21upx
			/* font-size: 14upx */
	}

	.fs15 {
		font-size: 22.5upx
			/* font-size: 15upx */
	}

	.fs27 {
		font-size: 40.5upx
			/* font-size: 27upx */
	}

	.fs18 {
		font-size: 27upx
			/* font-size: 18upx */
	}

	.fs28 {
		font-size: 42upx
			/* font-size: 28upx */
	}

	.fs10 {
		font-size: 15upx
			/* font-size: 10upx */
	}

	.fs30 {
		font-size: 45upx
			/* font-size: 28upx */
	}

	.fs36 {
		font-size: 54upx
			/* font-size: 28upx */
	}

	.fs24 {
		font-size: 36upx
			/* font-size: 24upx */
	}

	.fs20 {
		font-size: 30upx
			/* font-size: 20upx */
	}

	.fs22 {
		font-size: 33upx
			/* font-size: 22upx */
	}

	.fs21 {
		font-size: 31.5upx
			/* font-size: 21upx */
	}

	.flexsb {
		display: flex;
		justify-content: space-between;
	}

	.plr20 {
		padding: 0 20upx;
	}

	.plr10 {
		padding: 0 10upx;
	}

	.f6f4f5 {
		background-color: #fff;
	}

	.Cf74d0f {
		color: #f74d0f;
	}

	.C2dc34d {
		color: #2dc34d;
	}

	.mt20 {
		margin-top: 20upx;
	}

	.ti2 {
		text-indent: 2em;
	}


	.content {
		min-height: 100vh;
		background-color: #f6f4f5;
	}

	.bottom {
		box-sizing: border-box;
		padding: 0 10upx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 99999999999;
		left: 0;
		bottom: 0;
		height: 98upx;
		width: 100%;
		box-shadow: 0upx -1upx 10upx rgba(0, 0, 0, 0.8);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.bottom view {
		font-size: 27upx;
		color: #666;
		text-align: center;
	}

	.bottom view.active2 {
		color: #ff4300;
	}

	.bottom image {
		position: relative;
		top: 15upx;
		width: 48upx;
		height: 48upx;
	}

	.title {
		padding-left: 20upx;
		background-color: #fff;
		padding-top: 30upx;
		border-bottom: 1upx solid #f1f1f1;
	}

	.process {
		padding: 30upx 20upx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.circles {
		margin-top: 20upx;
		padding: 0 20upx;
		position: relative;
		z-index: 99;
	}

	.line {
		position: relative;
		z-index: 0;
		top: 40upx;
		width: 650upx;
		height: 2upx;
		margin: 0 auto;
	}

	.processTitle view.processActive {
		color: #ff4300;
	}

	.tousuContent {
		box-sizing: border-box;
		margin-top: 20upx;
		background-color: #fff;
	}

	.title2 {
		padding-left: 20upx;
		height: 70upx;
		line-height: 90upx;
		border-bottom: 1upx solid #f1f1f1;
	}

	.commonLi {
		padding: 20upx;
	}

	.commonLi image+image {
		margin-left: 33upx;
	}
</style>